<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content bg-purple row1">
          <layout-item-title>
            <template #title>
              <h4 class="title">机构概述</h4>
            </template>
          </layout-item-title>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple row1">
          <layout-item-title>
            <template #title>
              <h4 class="title">今日数据</h4>
            </template>
            <template #date>
              <div class="right">
                <div class="refresh"><i class="el-icon-refresh" /></div>
                <div class="date">2023-05-29 22:22 - 2023-05-31 23:59</div>
              </div>
            </template>
          </layout-item-title>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content bg-purple row2">
          <layout-item-title>
            <template #title>
              <h4 class="title">待办事项</h4>
            </template>
            <template #question>
              <div class="question"><i class="el-icon-info" /></div>
            </template>
            <template #date>
              <div class="right">
                <div class="refresh"><i class="el-icon-refresh" /></div>
                <div class="date">2023-05-29 22:22 - 2023-05-31 23:59</div>
              </div>
            </template>
          </layout-item-title>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple row2">
          <layout-item-title>
            <template #title>
              <h4 class="title">执行中任务</h4>
            </template>
            <template #question>
              <div class="question"><i class="el-icon-info" /></div>
            </template>
            <template #date>
              <div class="right">
                <div class="refresh"><i class="el-icon-refresh" /></div>
                <div class="date">2023-05-29 23:41</div>
              </div>
            </template>
          </layout-item-title>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple row3">
          <layout-item-title>
            <template #title>
              <h4 class="title">常用功能</h4>
            </template>
          </layout-item-title>
          <layout-function-list />
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content bg-purple row4">
          <layout-item-title>
            <template #title>
              <h4 class="title">线路管理</h4>
            </template>
          </layout-item-title>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple row4">
          <layout-item-title>
            <template #title>
              <h4 class="title">运输任务</h4>
            </template>
          </layout-item-title>
          <div class="transport_table">
            <template>
              <el-table
                :data="tableData"
                border
              >
                <el-table-column
                  prop="date"
                  label="日期"
                  width="180"
                />
                <el-table-column
                  prop="name"
                  label="姓名"
                  width="180"
                />
                <el-table-column
                  prop="address"
                  label="地址"
                />
              </el-table>
            </template>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content bg-purple row5">
          <layout-item-title>
            <template #title>
              <h4 class="title">订单总量</h4>
            </template>
            <template #date>
              <div class="right">
                <div class="date">2023-05-29</div>
              </div>
            </template>
          </layout-item-title>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple row5">
          <layout-item-title>
            <template #title>
              <h4 class="title">订单分布</h4>
            </template>
            <template #date>
              <div class="right">
                <div class="date">2023-05-29</div>
              </div>
            </template>
          </layout-item-title>

        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import LayoutItemTitle from '@/components/LayoutItemTitle'
import LayoutFunctionList from '@/components/LayoutFunctionList'
export default {
  name: 'Dashboard',
  components: {
    LayoutItemTitle,
    LayoutFunctionList
  },
  data() {
    return {
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }]
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  position: relative;
    .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #ffffff;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 200px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .row1{
    height: 200px;
  }
  .row2{
    height: 293px;
  }
  .row3{
    height: 193px;
  }
  .row4{
    height: 480px;
  }
  .row5{
    height: 595px;
  }

  .transport_table{
    .el-table{
      padding:  0 20px 20px;
      width: 100%;
      height: 80%;
    }
  }
}
</style>
